//- Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
//- 
//- Licensed under the Apache License, Version 2.0 (the "License");
//- you may not use this file except in compliance with the License.
//- You may obtain a copy of the License at
//- 
//-     http://www.apache.org/licenses/LICENSE-2.0
//- 
//- Unless required by applicable law or agreed to in writing, software
//- distributed under the License is distributed on an "AS IS" BASIS,
//- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//- See the License for the specific language governing permissions and
//- limitations under the License.

extends layout

block content
  .product-container
    if product
      .product-detail
        img.product-image(src=product.image)
        .product-name= product.name
        .product-price= `$${product.price}`
        .product-quantity= `Quantity: ${product.quantity}`
        .product-description= product.description
        if user
          button.add-to-wishlist(data-product-id=product.id) Add to Wishlist
          button.add-to-cart-button Add to Cart
    else
      .product-not-found
        h2 Product Not Found
        
    include comment.pug

  script.
    const addWishlistBtn = document.querySelector('.add-to-wishlist')
    if (addWishlistBtn) {
      addWishlistBtn.addEventListener('click', async () => {
        const productId = addWishlistBtn.dataset.productId
        const res = await fetch('/api/wishlist/add', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            productId
          })
        })

        const data = await res.json()
        if (data.success) {
          addWishlistBtn.textContent = 'Added to Wishlist'
          addWishlistBtn.disabled = true
        }
      })
    }
    
    const addCart = document.querySelector('.add-to-cart-button')
    if(addCart) {
      addCart.addEventListener('click', async () => {
        const productId = window.location.pathname.split('/').pop();
        
        const res = await fetch('/api/cart/add', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            productId,
            quantity: 1
          })
        });

        const data = await res.json();
        if (data.success) {
          const cart = document.querySelector('shopping-cart');
          cart.render();
        }
      });     
    }
